<template>
  <div class="line-box">
    <a-card>
      <div class="line">
        <div class="line-content">
          <div class="line-title">
            <div style="font-weight: 800;">15</div>
            <div>0㎡</div>
          </div>
          <div v-for="item in 9" class="line-item">
            o
          </div>
        </div>
      </div>
    </a-card>

  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';

// 使用 <script setup> 语法

// 外部传递的属性
const props = defineProps(['propFromParent'])

// 内部状态
const data = ref('Some default data')

// 生命周期钩子
onMounted(() => {
  // 组件挂载后执行的逻辑
  console.log('GeziComponent mounted')
})

// 方法
const someMethod = () => {
  console.log('Some method in GeziComponent')
}
</script>

<style lang="less">
.line-box {
  padding: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .line {

    .line-content {
      display: flex;
      gap: 20px;

      .line-item {
        flex: 1;
        height: 84px;
        border: 3px dashed #8FA3B7;
        background-color: #A9DCFD;
        border-radius: 10px;
        padding: 10px;
        transition: ease-in-out 0.1s all;
        cursor: pointer;

        &:hover {
          transform: scale(1.05);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

        }
      }

      .line-title {
        // 居中
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        // 宽度
        flex: 1;
        // 高度
        width: 80px;
        height: 84px;
        background: #F7F7F7;
        border-radius: 10px;
        padding: 10px;
      }

    }


  }
}
</style>
